<template>
  <div class="chat-wrapper" ref="chatContainer"
    :style='{ with: $attrs?.wrapperWith ? $attrs?.wrapperWith + "px" : "100%"}' v-loading="loading">
    <div class="main-content">
      <div v-for="(item, index) in list" :key="index">
        <div class="chat-wrapper-history-user">
          <div class="chatBox">
            <!-- 对话时间 -->
            <p class="time">{{ item.time }}</p>
            <p class="content" v-html="item.query"></p>
          </div>
          <el-avatar :src="require('@/assets/img/icon-avater.png')" style="width: 40px; height: 40px" />
        </div>
        <div class="chat-wrapper-history-ai">
          <el-avatar style="width: 40px; height: 40px" :src="require('@/assets/img/icon-ai.png')" />
          <div class="chatBox">
            <!-- 对话时间 -->
            <p class="time">{{ item.time }}</p>
            <!-- 对话内容 -->
            <div class="content" v-show="item.answer && errorFlag !== index">
              <div class="content-header">
                <div class="box-left">
                  <!-- <svg-icon name="search" style="width: 20px; height: 20px" /> -->
                  <i class="el-icon-document"></i>
                  <p>根据相关信息生成以下内容</p>
                </div>
                <div class="box-right" @click="handleCollapse(item, index)" v-if="item.answer.length > 200">
                  <p>{{ item.isCollapse ? '收起' : '展开' }}</p>
                  <img :src="require(`@/assets/img/${item.isCollapse ? 'triengel' : 'unfold'}.png`)" />
                </div>
              </div>
              <div class="content-main">
                <div :id="`ID${item.id + '-' + index}`" :class="[
                  'markdown-body',
                  (!item.isCollapse && 'expand') || 'collapse'
                ]" v-html="markdownToHtml(item.answer)" @mouseup.stop="getTextAnnotation($event)" />
              </div>
              <div :class="[
                'content-footer',
                'flx-end-c'
                ]">
                <div class="content-footer-right">
                  <div v-if="!stopFlag">
                    <el-tooltip class="box-item" effect="dark " content="重载" placement="top-start">
                      <!-- <svg-icon name="refresh" @click="sendMessage(item.query)" /> -->
                      <i class="el-icon-refresh" @click="sendMessage(item.query)"></i>
                    </el-tooltip>
                  </div>
                  <div v-if="!stopFlag">
                    <el-tooltip class="box-item" effect="dark" content="复制" placement="top-start">
                      <!-- <svg-icon name="copy" @click="copy(item.answer, `ID${item.id + '-' + index}`)" /> -->
                      <i class="el-icon-document-copy" @click="copy(`ID${item.id + '-' + index}`)"></i>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </div>
            <div :class="['content', 'loding']" v-show="!item.answer && errorFlag !== index">
              <div class="content-header">
                <div class="box-left">
                  <div style="background-color: #fff; border-radius: 6px 6px 6px 6px">
                    <div class="un">
                      <img
                        src="https://hd-custom.oss-cn-beijing.aliyuncs.com/cdn/images/ai/a06be3dc-f3c4-4166-8dcb-3d0b3f1d294b.gif"
                        alt="" />
                      <p>正在整合相关信息...</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div :class="['content', 'loding']" v-show="errorFlag === index">
              <div class="content-header">
                <div class="box-left">
                  <div style="background-color: #fff; border-radius: 6px 6px 6px 6px">
                    <div class="uns">
                      <img :src="require('@/assets/tips.svg')" alt="">
                      <span>智案精灵暂时繁忙，请稍后再尝试</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { markdownToHtml } from '@/libs/aiMethods'
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    conversationId: {
      type: String,
      default: ''
    },
    dataList: {
      type: Array,
      default: () => []
    },
    errorFlag: {
      type: Number,
      default: 0
    },
    stopFlag: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      list: [],
      annotation: {
        show: false,
        left: 0,
        top: 0,
        text: ''
      }
    };
  },
  watch: {
    dataList(val) {
      this.list = [...val]
    }
  },
  methods: {
    markdownToHtml,
    // 信息发送
    sendMessage(text) {
      this.$emit('sendMessage', text)
    },
    // 展开收缩
    handleCollapse(item, index) {
      this.list[index].isCollapse = !item.isCollapse
    },
    // 滚动设置
    setScrollTop() {
      if (this.$refs.chatContainer) {
        this.$refs.chatContainer.scrollTop = this.$refs.chatContainer.scrollHeight
      }
    },
    //复制
    async copy(id) {
      const dom = document.getElementById(id)
      if ('textContent' in dom && dom.textContent != null) {
        try {
          await this.$copyText(dom.textContent)
          this.$message({
            type: 'success',
            message: '复制成功!'
          })
        } catch (err) {
          this.$message({
            type: 'error',
            message: err
          })
        }
      }
    },
    // 获取文本标注 const intersection = arrays.reduce((acc, cur) => acc.filter(value => cur.includes(value)));
    getTextAnnotation(event) {
      if (window.getSelection) {
        const annotationText = window.getSelection().toString() //选中内容
        if (annotationText) {
          this.annotation.text = annotationText
          //获取鼠标事件位置
          this.annotation.left = event.clientX - 5
          this.annotation.top = event.clientY - 30
          this.annotation.show = true
          // 自动关闭
          setTimeout(() => {
            Object.assign(this.annotation, {
              left: 0,
              top: 0,
              text: annotationText,
              show: false
            })
          }, 5000)
        } else {
          Object.assign(this.annotation, {
            left: 0,
            top: 0,
            text: '',
            show: false
          })
        }
      } else if (document.selection && document.selection.type != 'Control') {
        //ie9以下的支持，不考虑
        return
      }
    }
  },

};


</script>

<style lang="scss" scoped>
.expand {
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.collapse {
  height: auto;
  -webkit-line-clamp: 999;
}

.chat-wrapper {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  font-family: "Arial";

  .pdf-box {
    width: 100%;
    height: 100%;
    position: absolute;
    left: -200%;
    top: -100%;
    overflow: auto;
    z-index: -1;
  }

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    opacity: 0;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color: transparent;
    //background-color: #c3c3c3;
    opacity: 0;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .main-content {
    // width: 883px;
    // margin: 0 auto;
  }

  .chat-wrapper-history-ai {
    display: flex;
    width: 100%;
    height: auto;

    :deep(.el-avatar--square) {
      box-shadow:
        0px 4px 16px 0px rgba(217, 225, 231, 0.6),
        0px 2px 6px 0px rgba(221, 230, 235, 0.4) !important;
      background-color: #fff !important;
      padding: 5px;

      img {
        background-color: #fff !important;
      }
    }

    .chatBox {
      margin-left: 10px;

      .time {
        font-family:
          PingFang SC,
          PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #b4bccf;
        line-height: 12px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 8px;
      }

      .content {
        margin-top: 6px;
        width: 800px;
        //padding: 12px 0;
        margin-bottom: 12px;
        background: #fff;
        border-radius: 8px 8px 8px 8px;

        .content-main {
          height: auto;
          display: flex;
          flex-direction: column;
        }

        .doc-wrapper {
          position: relative;
          width: 250px;
          height: 54px;
          padding: 5px 30px 5px 6px;
          display: flex;
          justify-content: start;
          align-content: center;
          background: #fbfbfb;
          border-radius: 6px;
          border: 1px solid #f2f2f2;
          margin: 2px;
          cursor: pointer;
          z-index: 1;

          &:hover {}

          .crate-loading {
            width: auto;
            position: absolute;
            left: 40px;
            bottom: 0px;
            font-family:
              PingFang SC,
              PingFang SC;
            font-weight: 400;
            font-size: 12px;
            display: flex;
            justify-content: center;
            align-items: center;

            .svg-icon {
              width: 15px;
              height: 15px;
            }

            span {
              display: inline-block;
              color: #949EAF;
            }

            &-icon {
              width: 15px;
              height: 15px;
              animation: turn 3s linear infinite;
              /* 旋转动画 指定class为crate-loading-icon即可使用*/
            }

            /*
            turn : 定义的动画名称
            10s : 动画时间
            linear : 动画平滑
            infinite :使动画无限循环
            transform:rotate(旋转角度)
            %0:动画开始
            %100:动画结束
            */
            @keyframes turn {
              0% {
                transform: rotate(0deg);
              }

              20% {
                transform: rotate(72deg);
              }

              40% {
                transform: rotate(144deg);
              }

              60% {
                transform: rotate(216deg);
              }

              80% {
                transform: rotate(288deg);
              }

              100% {
                transform: rotate(360deg);
              }
            }

          }

          >img {
            width: 36px;
            height: 36px;
          }

          &-right {
            width: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-content: start;
            margin-left: 6px;

            span {
              display: inline-block;
              text-align: left;
            }

            .title {
              //width: 172px;
              height: 54px;
              font-family:
                PingFang SC,
                PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: #4c4f5a;
              line-height: 32px;
              text-align: left;
              font-style: normal;
              text-transform: none;
              //overflow: hidden;
              //text-overflow: ellipsis;
              //white-space: nowrap;
              //margin-bottom: 10px;
            }
          }

          .err-tips {
            width: auto;
            position: absolute;
            left: 46px;
            bottom: 5px;
            display: inline-block;
            font-family:
              PingFang SC,
              PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: rgba(255, 48, 85, 1);
            line-height: 14px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }

        .content-footer {
          margin-top: 10px;
          padding: 16px;

          //display: flex;
          //justify-content: space-between;
          //align-items: center;
          .content-footer-right {
            display: flex;
            justify-content: right;

            div {
              cursor: pointer;
              margin-right: 10px;

              .svg-icon {
                height: 24px;
                width: 24px;
              }

              img {
                height: 24px;
                width: 24px;
              }
            }
          }
        }


        .content-header {
          margin-bottom: 12px;
          display: flex;
          justify-content: space-between;
          padding: 16px 16px 0 16px;

          .box-left {
            display: flex;
            margin-bottom: 10px;

            .un {
              display: flex;
              padding: 9px;
              border-radius: 6px 6px 6px 6px;
              background: linear-gradient(0.5092175212518993deg,
                  #00abf5 0%,
                  #0a7aff 31%,
                  #283df6 65%,
                  #6123e4 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              text-fill-color: transparent;

              >p {
                font-family:
                  PingFang SC,
                  PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #464a56;
                line-height: 16px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                background: linear-gradient(0.5deg,
                    #00abf5 0%,
                    #0a7aff 31%,
                    #283df6 65%,
                    #6123e4 100%);
                -webkit-background-clip: text;
                /*将设置的背景颜色限制在文字中*/
                -webkit-text-fill-color: transparent;
                /*给文字设置成透明*/
              }
            }

            .uns {
              margin-top: 2px;
              display: flex;
              align-items: center;
              padding: 9px;
              font-family:
                PingFang SC,
                PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: #ffab2e;
              line-height: 16px;
              text-align: left;
              font-style: normal;
              text-transform: none;

              span {
                display: inline-block;
              }
            }

            img,
            .svg-icon {
              width: 18px;
              height: 18px;
              align-items: center;
            }

            p {
              margin-top: 2px;
              margin-left: 5px;
              font-family:
                PingFang SC,
                PingFang SC;
              font-weight: 400;
              font-size: 13px;
              color: #949eaf;
              line-height: 12px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }

          .box-right {
            cursor: pointer;
            display: flex;

            img {
              width: 15px;
              height: 15px;
            }

            p {
              margin-top: 2px;
              margin-right: 5px;
              font-family:
                PingFang SC,
                PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: #b4bccf;
              line-height: 12px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }
        }
      }
    }
  }
}

.chat-wrapper-card-welcome {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 20%;
  border-radius: 16px;
}

.chat-wrapper-history-user {
  text-align: right;
  display: flex;
  justify-content: right;
  width: 100%;
  .chatBox {
    margin-right: 14px;
    margin-bottom: 24px;
    overflow: hidden;

    .time {
      width: 100%;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #b4bccf;
      line-height: 12px;
      text-align: right;
      font-style: normal;
      text-transform: none;
      margin-bottom: 8px;
    }

    .content {
      display: inline-block;
      padding: 10px;
      background: #0076f4;
      border-radius: 10px 10px 10px 10px;
      text-align: left;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: 27px;
      font-style: normal;
      text-transform: none;
    }
  }

  :deep(.el-avatar--square) {
    box-shadow:
      0px 4px 16px 0px rgba(217, 225, 231, 0.6),
      0px 2px 6px 0px rgba(221, 230, 235, 0.4) !important;

    img {
      height: 130% !important;

      background-color: #fff !important;
    }
  }
}
</style>
<style scoped>
.el-avatar {
  background: unset;
}
</style>